<!--  -->
<template>
  <div class="showDataPanel">
    <date-switching-component @getData="getData"/>
    <el-table class="tableView"  :expand-row-keys="expands" :row-key="getRowKeys" :data="dataList" @expand-change="expandColumn">
      <el-table-column type="expand" align="center" min-width="40">
        <template #default="props">
          <div class="tableColumnView">
            <historical-data-echarts-panel ref="DailyDosageStatisicsBar"  class="echartsView"/>
            <el-table :data="props.row.dataList">
              <el-table-column label="冷却水" align="center" v-if="showColumn.coolingWaterSupplyTemperature||showColumn.coolingWaterReturnTemperature||showColumn.coolingWaterSupplyReturnPressureDelta">
                <el-table-column prop="coolingWaterSupplyTemperature" label="供水温度℃" v-if="showColumn.coolingWaterSupplyTemperature" align="center" width="130"/>
                <el-table-column prop="coolingWaterReturnTemperature" label="回水温度℃" v-if="showColumn.coolingWaterReturnTemperature" align="center" width="130"/>
                <el-table-column prop="coolingWaterSupplyReturnPressureDelta" label="供回水压差Pa" v-if="showColumn.coolingWaterSupplyReturnPressureDelta" align="center" width="130"/>
              </el-table-column>
              <el-table-column prop="outdoorTemperature"  v-if="showColumn.outdoorTemperature" label="室外温度" align="center" width="130"/>
              <el-table-column prop="outdoorHumidity"  v-if="showColumn.outdoorHumidity"  label="室外湿度" align="center" width="130"/>
              <el-table-column prop="wetBulbTemperature"  v-if="showColumn.wetBulbTemperature" label="湿球温度" align="center" width="130"/>
            </el-table>
          </div>
        </template>
        <template #header>
          <el-popover
              placement="bottom"
              trigger="click"
              :visible="visible">
            <transition name="fade">
              <div>
                <div>选择显示字段</div>
                <div>
                  <el-checkbox v-model="showColumn.coolingWaterSupplyTemperature">供水温度</el-checkbox>
                  <el-checkbox v-model="showColumn.coolingWaterReturnTemperature">回水温度</el-checkbox>
                  <el-checkbox v-model="showColumn.coolingWaterSupplyReturnPressureDelta">供回水压差Pa</el-checkbox>
                  <el-checkbox v-model="showColumn.outdoorTemperature">室外温度</el-checkbox>
                  <el-checkbox v-model="showColumn.outdoorHumidity">室外湿度</el-checkbox>
                  <el-checkbox v-model="showColumn.wetBulbTemperature">湿球温度</el-checkbox>
                </div>
              </div>
            </transition>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button size="mini" type="primary" plain @click="saveColumn">确定</el-button>
            </div>
            <template #reference>
              <svg-icon icon-class="set"  class="setSvg"  @click="visible = true"/>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="rangeName" label="区域名称" align="center" :render-header="renderHeader"/>
      <el-table-column prop="deviceName" label="设备名称" align="center" :render-header="renderHeader"/>
      <el-table-column prop="deviceNo" label="设备编号" align="center" :render-header="renderHeader"/>
      <el-table-column prop="dataTime" label="采集时间" align="center" :render-header="renderHeader"/>
      <el-table-column prop="runtime" label="运行时常" align="center" :render-header="renderHeader"/>
      <el-table-column prop="status" label="状态" align="center" :render-header="renderHeader"/>
      <el-table-column prop="faultType" label="故障" align="center" :render-header="renderHeader"/>
      <el-table-column label="冷却水" align="center">
        <el-table-column prop="coolingWaterSupplyTemperature" label="供水温度℃" align="center" :render-header="renderHeader"/>
        <el-table-column prop="coolingWaterReturnTemperature" label="回水温度℃" align="center" :render-header="renderHeader"/>
        <el-table-column prop="coolingWaterSupplyReturnPressureDelta" label="供回水压差Pa" align="center" :render-header="renderHeader"/>
      </el-table-column>
      <el-table-column prop="outdoorTemperature" label="室外温度" align="center" :render-header="renderHeader"/>
      <el-table-column prop="outdoorHumidity" label="室外湿度" align="center" :render-header="renderHeader"/>
      <el-table-column prop="wetBulbTemperature" label="湿球温度" align="center" :render-header="renderHeader"/>
    </el-table>
  </div>
</template>

<script>
import DateSwitchingComponent from "@/components/DateSwitchingComponent.vue";
import _ from "underscore";
let component;
import moment from 'moment';
import HistoricalDataEchartsPanel from "@/views/data/components/HistoricalDataEchartsPanel.vue";
import {setEchartsData} from '../../../utils/public'
import {h} from "vue";

export default {
  data() {
    return {
      showChartsData:{},
      dataList: [],
      visible: false,
      showColumn: {
        coolingWaterSupplyTemperature: true,
        coolingWaterReturnTemperature: false,
        coolingWaterSupplyReturnPressureDelta: false,
        outdoorTemperature: false,
        outdoorHumidity: false,
        wetBulbTemperature: false
      },
      queryParams: {
        dateRange: [moment().subtract(1, 'days'), moment()],
        dateType: 'month'
      },
      expands: [], // 只展开一行放入当前行id
      getRowKeys: (row) => { // 获取当前行id
        return row.deviceNo; // 这里看这一行中需要根据哪个属性值是id
      }
    };
  },
  components: {HistoricalDataEchartsPanel, DateSwitchingComponent},
  methods: {
    renderHeader({column}) {
      let realWidth = 0;
      let span = document.createElement('span');

      span.innerText = column.label;
      document.body.appendChild(span);

      realWidth = span.getBoundingClientRect().width;
      column.minWidth = realWidth + 40; // 可能还有边距/边框等值，需要根据实际情况加上

      document.body.removeChild(span);
      return h('span', column.label);
    },
    expandColumn(row, expandedRows) {
      // 每次只展开一行
      if (expandedRows.length) {
        component.expands = []
        if (row) {
          component.expands.push(row.deviceNo);
          component.showChartsData=row.chart;
          setEchartsData(component);
        }
      } else {
        component.expands = []
      }
    },
    saveColumn() {
      //持久化存储
      localStorage.setItem("historyCoolingTower",JSON.stringify(this.showColumn))
      this.visible = false;
      if(component.expands.length==0) return;
      setEchartsData(component);
    },
    getData(data, type) {
      this.queryParams.dateRange = data;
      this.queryParams.dateType = type;
      this.$emit('getData');
    }
  },
  mounted() {
    component = this;
    //获取持久化存储
    if(localStorage.getItem("historyCoolingTower")){
      this.showColumn = JSON.parse(localStorage.getItem("historyCoolingTower"))
    }else{
      this.showColumn = {
        coolingWaterSupplyTemperature: true,
        coolingWaterReturnTemperature: false,
        coolingWaterSupplyReturnPressureDelta: false,
        outdoorTemperature: false,
        outdoorHumidity: false,
        wetBulbTemperature: false
      };
    }
  }
}

</script>
<style lang='scss'>
.test1 {
}
</style>